<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title></title>
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<link rel="stylesheet" type="text/css" href="../css/aui-slide.css" />


<style type="text/css">
			.aui-list .aui-list-item i.aui-iconfont {
				-webkit-align-self: center;
				align-self: center;
				font-size: 18px;
			}
			img.aui-img-round {
				border-radius: 1%;
			}
			.aui-slide-page-wrap
			{
				height: 15px;
			}
</style>
</head>
<body>
<div id="aui-slide3">
			<div class="aui-slide-wrap" >
				<div class="aui-slide-node bg-dark">
					<img src="${pageContext.request.contextPath}/img/news/news_01.png" />
				</div>
				<div class="aui-slide-node bg-dark">
					<img src="${pageContext.request.contextPath}/img/news/news_02.png" />
				</div>
				<div class="aui-slide-node bg-dark">
					<img src="${pageContext.request.contextPath}/img/news/news_03.png" />
				</div>
			</div>
			<div class="aui-slide-page-wrap">
				<!--分页容器-->
			</div>
		</div>
		<section class="aui-content" style="padding-bottom: 50px;">
			<ul class="aui-list aui-media-list" id="nice-articles">
				<li class="aui-list-item aui-list-item-middle" onclick="openDetailed(6)">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media" style="width: auto;"><img src="${pageContext.request.contextPath}/img/error-img.png" onerror="this.src='${pageContext.request.contextPath}/img/error-img.png'"  style="width:60px;height:60px;"  class="aui-img-round aui-list-img-sm">
						</div>
						<div  style="width: 100%" >
							<h3>加载中...</h3>
							<p>
 							</p>
						</div>
					</div>
				</li>
			</ul>
		</section>
		<section id="list"></section>
		<div class="aui-toast"  style="display:none;" id="loading">
			<div class="spinner aui-toast-content">
				<div class="spinner-container container1">
					<div class="circle1"></div>
					<div class="circle2"></div>
					<div class="circle3"></div>
					<div class="circle4"></div>
				</div>
				<div class="spinner-container container2">
					<div class="circle1"></div>
					<div class="circle2"></div>
					<div class="circle3"></div>
					<div class="circle4"></div>
				</div>
				<div class="spinner-container container3">
					<div class="circle1"></div>
					<div class="circle2"></div>
					<div class="circle3"></div>
					<div class="circle4"></div>
				</div>
			</div>
		</div>
		
</body>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/aui-slide.js"></script>
<script type="text/javascript" src="../js/aui-dialog.js" ></script>

<script type="text/javascript">
	//当前初始页
	var pageNumber = 1;
	//每页显示多少条
	var pageSize = 10;
	var countSize = 0;
	
	
	//页面显示
	$(function() {
		$("#nice-articles").html("");
		$("#list").html("");
		getPage(pageNumber, pageSize);
		//轮播图
		var slide3 = new auiSlide({
			container : document.getElementById("aui-slide3"),
			"height" : 200,
			"speed" : 500,
			"autoPlay" : 3000, //自动播放
			"loop" : true,
			"pageShow" : true,
			"pageStyle" : 'line',
			'dotPosition' : 'center'
		});
	});

	function getPage(pageNumber, pageSize) {
		$.ajax({
			url : '${pageContext.request.contextPath}/newsList.do?page='+ pageNumber + '&limit=' + pageSize,
					type : "POST",
					dataType : "json",
					success : function(data) {
					var rets = data;
					if (rets.code == 0) {
						if (rets.data != "" && rets.data != null) {
							var da = rets.data;
							var html = "";
							for (var i = 0; i < da.length; i++) {
								html += '<li class="aui-list-item aui-list-item-middle" onclick="openDetailed(' + da[i].newsId + ')">'
								html += '<div class="aui-media-list-item-inner">'
								html += '<div class="aui-list-item-media" style="width: auto;">'								
							    if(da[i].newsPicture != ""){
								html += '<img src="${pageContext.request.contextPath}/'+da[i].newsPicture+'"    onerror="this.src=\'${pageContext.request.contextPath}/img/error-img.png\'"   style="width:60px;height:60px;"  class="aui-img-round aui-list-img-sm">'
								
								}else{
									html += '<img src="${pageContext.request.contextPath}/img/error-img.png" style="width:60px;height:60px;"  class="aui-img-round aui-list-img-sm">'								
								} 
								html += '</div>'
								html += '<div  style="width: 100%" >'
								if (da[i].newsTitle != null && da[i].newsTitle != "") {
									html += '<h3>' + da[i].newsTitle + '</h3>'
								} else {
									html += '<h3>无标题</h3>'
								}
								if (da[i].newsDepict != null && da[i].newsDepict != "") {
									html += '<p style="font-size: 0.6rem;" >'
									if (da[i].newsDepict.length > 20) {
										html += da[i].newsDepict.substring(0, 20) + '...'
									} else {
										html += da[i].newsDepict
									}
									html += '</p>'
								}
								html += '</div>'
								html += '</div>'
								html += '</li>'
								
							}
							 
							
							countSize = rets.total;
							//复制总记录数
						} else {
							$("#list").html("<div style='width:100%;text-align:center;color:#999;padding:10px 0;'>暂无数据！</div>");
						}
						$("#nice-articles").append(html);
						/* api.addEventListener({
							name : 'scrolltobottom',
							extra : {
								threshold : '100',            //当事件为scrolltobottom时，设置距离底部多少距离时触发事件，默认值为0，数字类型
							},
						}, function(ret, err) {
							pageNumber++;
							if (pageNumber * 10 - 10 < countSize) {
								getPage(pageNumber, pageSize);
							} else {
								if (Math.ceil(countSize / 10) == pageNumber - 1) {
									$("#list").html("<div style='width:100%;text-align:center;color:#999;padding:10px 0;'>没有更多数据了！</div>");
								}
							}
						}); */
					} else {
						$("#list").html("<div style='width:100%;text-align:center;color:#999;padding:10px 0;'>暂无数据！</div>");
					}
				}
		});
	}

	//打开详细
	function openDetailed(id) {
		window.location.href = "${pageContext.request.contextPath}/wap/news_detailed_body.do?id=" + id;
	}
	
</script>
</html>